<template>
    <div class="select c-pointer" @click="show = !show" v-clickoutside="() => (show = false)">
        <div class="icon"></div>
        <div :class="{ 'select-placeholder': !current }">
            {{ (current && current.label) || placeholder }}
        </div>
        <div class="select-option-box" v-show="show">
            <div
                class="select-option-item"
                :class="{ 'select-option-item--active': value === item.value }"
                v-for="(item, index) in options"
                :key="index"
                @click="$emit('input', item.value)"
            >
                {{ item.label }}
            </div>
        </div>
    </div>
</template>

<script>
import clickoutside from "@/public/directive/clickoutside";

export default {
    name: "WSelect",
    directives: {
        clickoutside,
    },
    props: {
        options: {
            type: Array,
            default() {
                return [];
            },
        },
        value: [String, Number],
        placeholder: {
            type: String,
            default: "请选择...",
        },
    },
    data() {
        return {
            show: false,
        };
    },
    computed: {
        current() {
            return this.options.find((item) => item.value === this.value);
        },
    },
};
</script>

<style lang="scss" scoped>
.select {
    width: 100%;
    height: 44px;
    border: 2px solid #0467c0;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 44px;
    text-indent: 1.5em;
}
.select-placeholder {
}
.select-option-box {
    width: 358px;
    margin-left: -2px;
    position: relative;
    z-index: 999;
    border: 1px solid rgba(4, 103, 192, 0.6);
    // border: 1px solid yellow;
    background-color: rgba(4, 103, 192, 0.6);
}
.select-option-item {
    position: relative;
    width: 358px;
    height: 44px;
    // border: 1px solid rgba(4, 103, 192, 0.6);
    // border: 1px solid red;
    .label {
        position: absolute;
        top: 14px;
        left: 18px;
        // border: 1px solid red;
    }
}
.select-option-item:hover {
    background-color: rgba(4, 103, 192, 0.9);
}
.select-option-item--active {
    // background-color: rgba(4, 103, 192, 0.9);
}
.icon {
    position: absolute;
    top: 16px;
    right: 13px;
    width: 20px;
    height: 14px;
    background-image: url("../../../../../static/images/ui/dropicon.png");
}
</style>
